<template lang="html">
  <div class="main">

    <mt-navbar v-model="selected_status">
      <mt-tab-item v-for="(item, index) in statuses"
        :key="index" 
        :id="item.name">
        {{ item.display_name }}
      </mt-tab-item>
    </mt-navbar>
    <!-- tab-container -->
    <mt-tab-container v-model="selected_status">
      <mt-tab-container-item id="all">
        <order-list status="all"></order-list>
      </mt-tab-container-item>
      <mt-tab-container-item id="submitted">
        <order-list status="submitted"></order-list>
      </mt-tab-container-item>
      <mt-tab-container-item id="paid">
        <order-list status="paid"></order-list>
      </mt-tab-container-item>
    </mt-tab-container>

  </div>

</template>

<script>
// import { getUserCaptial } from '@/api/user'
import { Toast } from 'mint-ui'
import orderList from './orderList.vue'

export default {
  name: 'main',
  components: {
    'order-list': orderList,
  },
  data(){
    return {
      selected_status: 'all',

      statuses: [{
        name: 'all',
        display_name: '全部',
      }, {
        name: 'submitted',
        display_name: '待付款',
      }, {
        name: 'paid',
        display_name: '待收货',
      }],
    }
  },
  created () {

    let query = this.$route.query
    if(query && Object.keys(query).length > 0){
      if(query.status){
        this.selected_status = query.status
      }
    }
    
    // getUserCaptial().then(res => {
    //   if (res.code === 1) {
    //     this.userData = res.data
    //   } else {
    //     Toast(res.message)
    //   }
    // })
  },
  mounted(){

  },
  methods: {
    goCash(){
      this.$router.push({
        name: '提现奖励金'
      })
    }
  },

}
</script>

<style lang="less" scoped>

  .main{
    width: 100%;
    font-size: 3.2vw;
    margin-top: 6vh;

    div, ul, li, span, a{
      box-sizing: border-box;
    }

    .flex{
      display: -ms-flex;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
    }

    .mint-navbar{
      position: fixed;
      top: 6vh;
      z-index: 111;
      width: 100%;

      .mint-tab-item{
        padding: 1.5vh 0;
        height: 5.5vh;
        line-height: 5.5vh;

      }
    }
    .mint-tab-container{
      margin-top: 11.5vh;
    }
  }
 
</style>
